<template>
  <a-drawer
    title="主题设置"
    placement="right"
    :visible="visible"
    @close="onClose"
    width="300"
  >
    <a-form layout="vertical">
      <a-form-item label="主题色">
        <a-color-picker
          v-model:value="themeConfig.primaryColor"
          @change="handleColorChange"
        />
      </a-form-item>

      <a-form-item label="导航模式">
        <a-radio-group v-model:value="themeConfig.layout">
          <a-radio value="side">侧边菜单</a-radio>
          <a-radio value="top">顶部菜单</a-radio>
          <a-radio value="mix">混合菜单</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="主题模式">
        <a-radio-group v-model:value="themeConfig.theme">
          <a-radio value="light">亮色</a-radio>
          <a-radio value="dark">暗色</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="内容区域">
        <a-checkbox v-model:checked="themeConfig.fixedHeader">
          固定 Header
        </a-checkbox>
        <br />
        <a-checkbox v-model:checked="themeConfig.fixedSider">
          固定侧边栏
        </a-checkbox>
      </a-form-item>

      <a-form-item label="其他设置">
        <a-checkbox v-model:checked="themeConfig.colorWeak">
          色弱模式
        </a-checkbox>
        <br />
        <a-checkbox v-model:checked="themeConfig.hideMenu">
          隐藏菜单
        </a-checkbox>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-space>
        <a-button @click="resetTheme">恢复默认</a-button>
        <a-button type="primary" @click="saveTheme">保存</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import defaultTheme from '@/config/theme'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'change'])

const themeConfig = reactive({
  primaryColor: defaultTheme.primaryColor,
  layout: 'side',
  theme: 'light',
  fixedHeader: true,
  fixedSider: true,
  colorWeak: false,
  hideMenu: false
})

// 加载保存的主题配置
const loadTheme = () => {
  const savedTheme = localStorage.getItem('theme')
  if (savedTheme) {
    Object.assign(themeConfig, JSON.parse(savedTheme))
  }
}

// 保存��题配置
const saveTheme = () => {
  localStorage.setItem('theme', JSON.stringify(themeConfig))
  emit('change', themeConfig)
  message.success('主题配置已保存')
  onClose()
}

// 重置主题配置
const resetTheme = () => {
  Object.assign(themeConfig, {
    primaryColor: defaultTheme.primaryColor,
    layout: 'side',
    theme: 'light',
    fixedHeader: true,
    fixedSider: true,
    colorWeak: false,
    hideMenu: false
  })
  saveTheme()
}

// 主题色变化处理
const handleColorChange = (color) => {
  themeConfig.primaryColor = color
  // 更新全局主题色
  document.documentElement.style.setProperty('--ant-primary-color', color)
}

const onClose = () => {
  emit('update:visible', false)
}

// 初始化加载主题配置
loadTheme()
</script> 